<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta id="i18n_pagename" content="common">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Agora WebSDK Demos</title>
  <link rel="stylesheet" href="./assets/bootstrap.min.css">
  <link rel="stylesheet" href="./assets/index.css">
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-57262777-1"></script>
  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?f43104b858cabd64f03a2e1f8c387296";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>
</head>
<body>
  <div class="container-fluid banner">
    <p class="banner-text">Agora WebSDK Demos <a class="btn btn-secondary" href="https://forms.office.com/Pages/ResponsePage.aspx?id=dFMnYKo-wkmDw8wYnRJpgXLvSSJvzXpKsNwZBzWrfBhUNFFEUldSWVBNNkRMQklYS1ZZODY0Mk9BVy4u"><small><label class="i18n" name="questionare"></label></small></a></p>
    <a style="color: rgb(255, 255, 255);fill: rgb(255, 255, 255);fill-rule: evenodd; position: absolute; right: 10px; top: 4px;"
      class="Header-link " href="https://github.com/AgoraIO/API-Examples-Web/tree/main/Demo">
      <svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
    </a>
  </div>
  <div class="float-left">
    <nav class="navbar bg-light">
      <ul class="navbar-nav">
        <li class="nav-item">
          <div>
            <span><a class="nav-link" href="#1"><label class="i18n" name="basic"></label></a></span>
            <ul>
              <li><label class="i18n" name="basicvideocalling"></label></li>
              <li><label class="i18n" name="basiclivestreaming"></label></li>
              <li><label class="i18n" name="selfRendering"></label></li>
              <li><label class="i18n" name="selfCapturing"></label></li>
              <li><label class="i18n" name="cloudProxy"></label></li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <div>
            <span><a class="nav-link" href="#2"><label class="i18n" name="advanced"></label></a></span>
            <ul>
              <li><label class="i18n" name="testdevices"></label></li>
              <li><label class="i18n" name="muteaudiovideo"></label></li>
              <li><label class="i18n" name="adjustvideoprofile"></label></li>
              <li><label class="i18n" name="incallstats"></label></li>
              <li><label class="i18n" name="sharescreen"></label></li>
              <li><label class="i18n" name="imageenhance"></label></li>
              <li><label class="i18n" name="audioeffect"></label></li>
              <li><label class="i18n" name="cdnstreaming"></label></li>
              <li><label class="i18n" name="dualstream"></label></li>
              <li><label class="i18n" name="geofencing"></label></li>
              <li><label class="i18n" name="multiplechannel"></label></li>
              <li><label class="i18n" name="customvideosource"></label></li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <div>
            <span><a class="nav-link" href="#3"><label class="i18n" name="plugins"></label></a></span>
            <ul>
              <li><label class="i18n" name="virtualbackground"></label></li>
              <li><label class="i18n" name="aidenoiser"></label></li>
            </ul>
          </div>

        </li>
        <li class="nav-item">
          <div>
            <span><a class="nav-link" href="#3"><label class="i18n" name="scenarios"></label></a></span>
            <ul>
              <li><label class="i18n" name="groupvideocalling"></label></li>
              <li><label class="i18n" name="movietogether"></label></li>
            </ul>
          </div>

        </li>
        <li class="nav-item">
          <div>
            <span><a class="nav-link" href="#4"><label class="i18n" name="faq"></label></a></span>
            <ul>
              <li><label class="i18n" name="autoplay"></label></li>
              <li><label class="i18n" name="stringuid"></label></li>
            </ul>
          </div>

        </li>
      </ul>
    </nav>
  </div>
  <div class="container">
    <h1 id="1"><label class="i18n" name="basic"></label></h1>
    <div class="card-deck">
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="basicvideocalling"></label></h5>
          <p class="card-text"><label class="i18n" name="basicvideocallingnote"></label></p>
          <a href="./basicVideoCall/index.html" class=" btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="basiclivestreaming"></label></h5>
          <p class="card-text"><label class="i18n" name="basiclivestreamingnote"></label></p>
          <a href="./basicLive/index.html" class="btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
        </div>
      </div>

      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="cloudProxy"></label></h5>
          <p class="card-text"><label class="i18n" name="cloudProxyNote"></label></p>
          <a href="./cloudProxy/index.html" class="btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
        </div>
      </div>


      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="selfRendering"></label></h5>
          <p class="card-text"><label class="i18n" name="selfRenderingNote"></label></p>
          <a href="./selfRendering/index.html" class="btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="selfCapturing"></label></h5>
          <p class="card-text"><label class="i18n" name="selfCapturingNote"></label></p>
          <a href="./selfCapturing/index.html" class="btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
        </div>
      </div>

      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="videoScreenshot"></label></h5>
          <p class="card-text"><label class="i18n" name="videoScreenshotNote"></label></p>
          <a href="./screenshot/index.html" class="btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
        </div>
      </div>

    </div>
  </div>
  <div class="container">
    <h1 id="2"><label class="i18n" name="advanced"></label></h1>
    <div class="card-deck">
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="testdevices"></label></h5>
          <p class="card-text"><label class="i18n" name="testdevicesnote"></label><a href="https://docs.agora.io/en/Video/test_switch_device_web_ng?platform=Web"><label class="i18n" name="doc"></label></a></p>
          <a href="./recordingDeviceControl/index.html" class="btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="muteaudiovideo"></label></h5>
          <p class="card-text"><label class="i18n" name="muteaudiovideonote"></label></p>
          <a href="./basicMute/index.html" class="btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="adjustvideoprofile"></label></h5>
          <p class="card-text"><label class="i18n" name="adjustvideoprofilenote"></label><a href="https://docs.agora.io/en/Video/video_profile_web_ng?platform=Web"><label class="i18n" name="doc"></label></a></p>
          <a href="./adjustVideoProfile/index.html" class="btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="incallstats"></label></h5>
          <p class="card-text"><label class="i18n" name="incallstatsnote"></label><a href="https://docs.agora.io/en/Video/in-call_quality_web_ng?platform=Web"><label class="i18n" name="doc"></label></a></p>
          <a href="./displayCallStats/index.html" class="btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="sharescreen"></label></h5>
          <p class="card-text"><label class="i18n" name="sharescreennote"></label><a href="https://docs.agora.io/en/Video/screensharing_web_ng?platform=Web"><label class="i18n" name="doc"></label></a></p>
          <a href="./shareTheScreen/index.html" class="btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="imageenhance"></label></h5>
          <p class="card-text"><label class="i18n" name="imageenhancenote"></label></p>
          <a href="./videoBeautyEffect/index.html" class="btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="audioeffect"></label></h5>
          <p class="card-text"><label class="i18n" name="audioeffectnote"></label><a href="https://docs.agora.io/en/Video/audio_effect_mixing_web_ng?platform=Web"><label class="i18n" name="doc"></label></a></p>
          <a href="./audioMixingAndAudioEffect/index.html" class="btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="cdnstreaming"></label></h5>
          <p class="card-text"><label class="i18n" name="cdnstreamingnote"></label><a href="https://docs.agora.io/en/Interactive%20Broadcast/cdn_streaming_web_ng?platform=Web"><label class="i18n" name="doc"></label></a></p>
          <a href="./pushStreamToCDN/index.html" class="btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="dualstream"></label></h5>
          <p class="card-text"><label class="i18n" name="dualstreamnote"></label><a href="https://docs.agora.io/en/Agora%20Platform/dual_stream_mode?platform=Web"><label class="i18n" name="doc"></label></a></p>
          <a href="./dualStream/index.html" class="btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="geofencing"></label></h5>
          <p class="card-text"><label class="i18n" name="geofencingnote"></label><a href="https://docs.agora.io/en/Interactive%20Broadcast/region_web_ng_rtc?platform=Web"><label class="i18n" name="doc"></label></a></p>
          <a href="./geoFencing/index.html" class="btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="multiplechannel"></label></h5>
          <p class="card-text"><label class="i18n" name="multiplechannelnote"></label></p>
          <a href="./joinMutlipleChannel/index.html" class="btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="customvideosource"></label></h5>
          <p class="card-text"><label class="i18n" name="customvideosourcenote"></label></p>
          <a href="./customVideoSource/index.html" class="btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
        </div>
      </div>



    </div>
</div>
<div class="container">
  <h1 id="3"><label class="i18n" name="plugins"></label></h1>
  <div class="card-deck">

    <div class="card demo-card">
      <div class="card-body">
        <h5 class="card-title"><label class="i18n" name="virtualbackground"></label></h5>
        <p class="card-text"><label class="i18n" name="virtualbackgroundnote"></label></p>
        <a href="./virtualBackground/index.html" class="btn btn-primary demo-card-btn"><label class="i18n"
                                                                                              name="tryitnow"></label></a>
      </div>
    </div>
    <div class="card demo-card">
      <div class="card-body">
        <h5 class="card-title"><label class="i18n" name="aidenoiser"></label></h5>
        <p class="card-text"><label class="i18n" name="aidenoisernote"></label></p>
        <a href="./aiDenoiser/index.html" class="btn btn-primary demo-card-btn"><label class="i18n" name="tryitnow"></label></a>
      </div>
    </div>



  </div>
</div>
  <div class="container">
    <h1 id="3"><label class="i18n" name="scenarios"></label></h1>
    <div class="card-deck">
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="groupvideocalling"></label></h5>
          <p class="card-text"><label class="i18n" name="groupvideocallingnote"></label></p>
          <a href="https://github.com/AgoraIO-Community/AgoraMultiCall-vue" class="btn btn-primary demo-card-btn"><label class="i18n" name="viewthecode"></label></a>
        </div>
      </div>

      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="movietogether"></label></h5>
          <p class="card-text"><label class="i18n" name="movietogethernote"></label></p>
          <a href="https://github.com/AgoraIO-Community/MovieTogether" class="btn btn-primary demo-card-btn"><label class="i18n" name="viewthecode"></label></a>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <h1 id="4"><label class="i18n" name="faq"></label></h1>
    <div class="card-deck">
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="autoplay"></label></h5>
          <p class="card-text"><label class="i18n" name="autoplaynote"></label></p>
          <a href="https://docs.agora.io/en/Interactive%20Broadcast/autoplay_policy_web?platform=Web" class="btn btn-primary demo-card-btn">Check the Article</a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="stringuid"></label></h5>
          <p class="card-text"><label class="i18n" name="stringuidnote"></label></p>
          <a href="https://docs.agora.io/en/Interactive%20Broadcast/faq/string" class="btn btn-primary demo-card-btn">Check the Article</a>
        </div>
      </div>
      <div class="card demo-card">
        <div class="card-body">
          <h5 class="card-title"><label class="i18n" name="legacywebdemo"></label></h5>
          <p class="card-text"><label class="i18n" name="legacywebdemonote"></label></p>
          <a href="https://webdemo.agora.io/agora-web-showcase/" class="btn btn-primary demo-card-btn">Check Legacy Web Demo</a>
        </div>
      </div>
    </div>
  </div>

  <script src="./assets/jquery-3.4.1.min.js"></script>
  <script src="./assets/jquery.cookie.js"></script>
  <script src="./assets/jquery.i18n.properties-min.js"></script>
  <script src="./assets/bootstrap.bundle.min.js"></script>
  <script src="./i18n/language.js"></script>
  <script>
    $(document).ready(function(){
      var headHeight=200;
      var nav=$(".navbar");
      console.log($(window).width());
      if($(window).width() < 1500){
        console.log("hide!");
        nav.parent().hide();
        return;
      }
      $(window).scroll(function(){
        if($(this).scrollTop()>headHeight){
          nav.addClass("navFix");
        }
        else{
          nav.removeClass("navFix");
        }
      })
      $(window).resize(function(){
        nav=$(".navbar");
        if($(window).width() < 1500){
          nav.hide();
          return;
        }
        else{
          nav.show()
        }
      })
    })
  </script>
</body>
</html>